<template>
  <div class="app-container">
    <!-- 条件查询 -->
    <el-form :inline="true" :model="query" size="mini">
      <el-form-item label="任务名称:">
        <el-input v-model.trim="query.taskName" />
      </el-form-item>
      <el-form-item>
        <el-button icon="el-icon-search" type="primary" @click="queryData">查询</el-button>
        <el-button icon="el-icon-refresh" @click="reload">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- stripe 带斑马纹 -->
    <el-table :data="list" stripe border style="width: 100%">
      <el-table-column align="center" type="index" label="序号" width="50" />
      <el-table-column align="center" prop="taskName" label="任务名称" min-width="160" />
      <el-table-column align="center" label="所属流程" min-width="120">
        <template slot-scope="{row}">
          {{ `${row.processName} - v${row.version}` }}
        </template>
      </el-table-column>
      <el-table-column align="center" prop="proposer" label="流程发起人" width="180" />
      <el-table-column align="center" prop="taskStartTime" label="任务开始日期" width="180" />
      <el-table-column align="center" prop="taskEndTime" label="任务结束日期" width="180" />
      <el-table-column align="center" label="操作" fixed="right" width="260">
        <template slot-scope="{row}">
          <el-button type="text" @click="clickProcessHistory(row)">审批历史</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页组件 -->
    <el-pagination
      :current-page="page.pageNum"
      :page-sizes="[10, 20, 50]"
      :page-size="page.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="page.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />

    <!-- 审批历史 -->
    <history ref="historyRef" :business-key="row.businessKey" :process-instance-id="row.processInstanceId" />
  </div>
</template>
<script>
import api from '@/api/workflow/task'
import History from '@/components/Process/History'

export default {
  name: 'Await', // 和对应路由表中配置的name值一致

  components: { History },

  data() {
    return {
      list: [
        {
          'taskId': 'leave2:3:62509',
          'taskName': '总经理审批',
          'processName': '请假',
          'version': 3,
          'proposer': '小梦',
          'taskStartTime': '2020-01-24 17:07:16',
          'taskEndTime': '2021-04-15 15:37:36'
        },
        {
          'taskId': 'test:1:60011',
          'taskName': '人事审批',
          'processName': '休假',
          'version': 3,
          'proposer': '小学',
          'taskStartTime': '2020-12-24 11:07:10',
          'taskEndTime': '2021-08-15 15:30:36'
        }
      ],
      page: {
        pageNum: 1,
        pageSize: 10,
        total: 0
      },
      query: {}, // 查询条件
      row: {}, // 点击的行数据
      processInstanceId: null
    }
  },

  created() {
    this.fetchData()
  },

  methods: {
    // 分页条件查询
    async fetchData() {
      const { data } = await api.getCompleteTaskList(this.query, this.page.pageNum, this.page.pageSize)
      this.list = data.records
      this.page.total = data.total
    },

    // 当每页显示多少条改变后触发
    handleSizeChange(val) {
      this.page.pageSize = val
      this.fetchData()
    },
    // 切换页码触发
    handleCurrentChange(val) {
      this.page.pageNum = val
      this.fetchData()
    },

    // 条件查询方法
    queryData() {
      this.page.pageNum = 1
      this.fetchData()
    },

    // 刷新重置
    reload() {
      this.query = {}
      this.fetchData()
    },

    // 点击审批历史
    clickProcessHistory(row) {
      this.row = row
      this.$refs.historyRef.visible = true
    }
  }
}
</script>
